<template>
  <el-card
    class="person-info work-bench-team__card"
    shadow="never"
    body-style="display: flex; flex-direction: column; height: calc(100% - 20px); padding: 10px 15px;"
  >
    <div class="person-info__header work-bench-team__card__header">
      <span class="work-bench-team__card__title person-info__title">人员信息</span>
    </div>
    <div class="work-bench-team__card__body person-info__body">
      <div class="person-info__item" v-for="item in list" :key="item.id">
        <div class="person-info__item--left">
          <el-image fit="cover" class="person-info__item__img" :src="CORE.image(item.url) || img_user_photo" />
        </div>
        <div class="person-info__item--right">
          <div class="person-info__item__name">{{ item.name }}</div>
          <div>{{ item.description }}</div>
          <div>{{ item.phone }}</div>
        </div>
      </div>
    </div>
  </el-card>
</template>

<script>
// ============================== 导入依赖 ============================== //

import dashboardTeamApi from '@admin/views/Workbench/WorkbenchTeam/api'
import img_user_photo from '../img/user-photo.png'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'PersonInfo',

  props: {
    /**
     * 班组ID
     */
    teamId: { type: String, default: '' },
  },

  data() {
    return {
      img_user_photo,
      list: [],
    }
  },

  mounted() {
    this.$nextTick(() => {
      dashboardTeamApi.queryTeamPersonPie({
        teamId: this.teamId,
        tenantNo: 0,
      }).then((res) => {
        this.list = res.content || []
      })
    })
  },
}
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
